<template>
  <div>
    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
      <a-tree
        checkable
        @expand="onExpand"
        :expandedKeys="expandedKeys"
        v-model="checkedKeys"
        @select="onSelect"
        :selectedKeys="selectedKeys"
        :treeData="dataList"
      >
      </a-tree>
      <a-form-item :wrapperCol="{span: 19, offset: 5}">
        <a-button :loading="loading" type="primary" @click="nextStep">下一步</a-button>
        <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { getTree } from '@/api/manage'
import { mapGetters } from 'vuex'

const getParentKey = (key, tree) => {
  let parentKey
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i]
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentKey = node.key
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children)
      }
    }
  }
  return parentKey
}
export default {
  name: 'Step2',
  data () {
    return {
      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
      form: this.$form.createForm(this),
      loading: false,
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      dataList: []
    }
  },
  props : ['params'],
  created () {
    this.loading=true;
    getTree({ token: this.token(), ar_id: this.pmsArId(), cm_mg_id: this.nowMg() , feeType: this.params.feeType }).then(res => {
      this.loading=false;
      if (res.code == 0) {
        this.dataList = res.data
      } else {
        this.$notification['error']({
          message: '错误',
          description: res.msg,
          duration: 4
        })
      }
    })
  },
  methods: {
    ...mapGetters(['token', 'pmsArId', 'nowMg']),
    nextStep () {
      const that = this
      if(that.checkedKeys.length === 0){
         that.$message.error('请选择住户！')
         return false;
      }
      this.$emit('nextStep',that.checkedKeys)

    },
    prevStep () {
      this.$emit('prevStep')
    },
    onExpand  (expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onSelect (selectedKeys, info) {
      console.log('onSelect', info)
      this.selectedKeys = selectedKeys
    }
  }
}
</script>

<style lang="less" scoped>
  .stepFormText {
    margin-bottom: 24px;

    .ant-form-item-label,
    .ant-form-item-control {
      line-height: 22px;
    }
  }

</style>
